import React, { Component } from 'react';
import {
	View, Text, StyleSheet, Dimensions, Platform, Modal
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import { GLOBAL } from '../config/global';
import { API, API_GENERATE } from '../config/api';
import HTTP from '../utils/http'
const scale = GLOBAL.SCALE;

export default function ModalPicDelComponent(props) {

	const { visible, uri, delPress, picPress, fileId, delTextHide, attachmentModalStyle } = props;
	const imageUrl = [{
		url: uri,
		width: Dimensions.get('window').width
	}]
	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={visible}
			onRequestClose={() => { }}>
			<View style={[styles.attachmentModal, attachmentModalStyle]}>

				<View style={styles.attachmentModalTop}>
					{
						delTextHide ? null :
							<Text style={[styles.attachmentModalText, { marginTop: Platform.OS === 'ios' ? 20 : 0 }]}
								onPress={async () => {
									let responseData = {};
									if (fileId && fileId.length) {
										responseData = await HTTP.POST(API_GENERATE(API.DELETE_FILE) + '?fileId=' + fileId, {});
									}
									delPress && delPress();
								}}>删除</Text>
					}
				</View>
				<ImageViewer imageUrls={imageUrl} onClick={() => {
					picPress && picPress();
				}} />
			</View>
		</Modal>
	);


}

const styles = StyleSheet.create({
	attachmentModalTop: {
		width: '100%',
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'flex-end',
	},
	attachmentModalText: {
		textAlign: 'right',
		color: '#000',
		width: 60 * scale,
		paddingRight: 12,
		paddingBottom: 10,
	},
	attachmentModal: {
		width: 375 * scale,
		height: '100%',
		backgroundColor: '#fff',
		justifyContent: 'space-between',
		paddingTop: Platform.OS === 'ios' ? 32 : 0,
	}
})